{% extends "base.html" %}

{% block stylesheets %}
{% endblock %}

{% block content %}
	<div class="jumbotron">
		<div class="container">
			<h1>用户列表</h1>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				{% if q and field %}
				<h5 class="text-muted text-center">
					搜索 <strong>{{ field }}</strong> 为 <strong>{{ q }}</strong> 的用户
				</h5>
				<h6 class="text-muted text-center pb-3">
					共 {{ users.total }} 个结果，当前第 {{ users.page }} 页
				</h6>
				{% endif %}

				{% with form = Forms.users.PublicUserSearchForm(field=field, q=q) %}
				<form method="GET" class="form-inline">
					<div class="input-group w-100">
						<div class="input-group-prepend">
						  {{ form.field(class="btn btn-outline-secondary dropdown-toggle") }}
						</div>
						{{ form.q(class="form-control", placeholder="输入搜索关键词") }}
						<div class="input-group-append">
							<button class="btn btn-primary" type="submit"><i class="fas fa-search" aria-hidden="true"></i>&nbsp;&nbsp;搜索</button>
						</div>
					</div>
				</form>
				{% endwith %}
			</div>
		</div>

		<hr>

		<div class="row">
			<div class="col-md-12">
				<table class="table table-striped table-dark">
					<thead>
					<tr>
						<td><b>用户名</b></td>
						<td><b>网站</b></td>
						<td class="d-none d-md-table-cell d-lg-table-cell"><b>组织</b></td>
						<td class="d-none d-md-table-cell d-lg-table-cell"><b>国家/地区</b></td>
					</tr>
					</thead>
					<tbody>
					{% for user in users.items %}
						<tr>
							<td>
								{% if scores_visible() %}
									<a href="{{ url_for('users.public', user_id=user.id) }}">
										{{ user.name | truncate(50) }}
									</a>
								{% else %}
									<span>{{ user.name | truncate(50) }}</span>
								{% endif %}
								{% if user.oauth_id %}
									<a href="https://majorleaguecyber.org/u/{{ user.name }}">
										<span class="badge badge-primary">官方认证</span>
									</a>
								{% endif %}
							</td>
							<td class="text-center" style="width: 10px;">
								{% if user.website and (user.website.startswith('http://') or user.website.startswith('https://')) %}
									<a href="{{ user.website }}" target="_blank" rel="noopener">
										<i class="fas fa-external-link-alt" data-toggle="tooltip" data-placement="top"
										   title="{{ user.website }}"></i>
									</a>
								{% endif %}
							</td>
							<td class="d-none d-md-table-cell d-lg-table-cell">
								{% if user.affiliation %}
									{% if user.affiliation | length > 50 %}
										<span data-toggle="tooltip" data-placement="top" title="{{ user.affiliation }}">
									{{ user.affiliation | truncate(50) }}
								</span>
									{% else %}
										<span>
									{{ user.affiliation | truncate(50) }}
								</span>
									{% endif %}
								{% endif %}
							</td>
							<td class="d-none d-md-table-cell d-lg-table-cell">
								<span>
									{% if user.country %}
										<i class="flag-{{ user.country.lower() }}"></i>
										{{ lookup_country_code(user.country) }}
									{% endif %}
								</span>
							</td>
						</tr>
					{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
		{% if users.pages > 1 %}
			<div class="row">
				<div class="col-md-12">
					<div class="text-center">
						共 {{ users.pages }} 页
						<br>
						{% if users.page != 1 %}
						<a href="{{ prev_page }}">上一页</a>
						{% endif %}
						<select class="page-select">
							{% for page in range(1, users.pages + 1) %}
							<option {% if users.page == page %}selected{% endif %}>{{ page }}</option>
							{% endfor %}
						</select>
						{% if users.next_num %}
						<a href="{{ next_page }}">下一页</a>
						{% endif %}
					</div>
				</div>
			</div>
		{% endif %}
	</div>
{% endblock %}

{% block scripts %}
{% endblock %}